<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        h1,
        h2,
        h3,
        h4,
        h5 {
            font-weight: normal;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
            color: black;
        }
        
        img {
            vertical-align: bottom;
        }
        
        header {
            height: 48px;
            width: 100%;
            background-color: #323232;
            /* position: relative; */
        }
        
        body {
            padding-bottom: 36px;
        }
        
        header .banner {
            width: 1100px;
            height: 100%;
            position: relative;
            margin: auto;
            background-image: url(img/1/1.2.png);
            background-repeat: no-repeat;
            background-position: 820px 16px;
            background-size: 270px;
        }
        
        .banner ul {
            width: 485px;
            height: 48px;
            line-height: 48px;
            font-size: 14px;
            color: #a6a6a6;
            text-align: center;
            display: flex;
            justify-content: space-between;
            margin-left: 230px;
        }
        
        .banner li {
            width: 16.6%;
        }
        
        .banner li a {
            font-size: 14px;
            color: #a6a6a6;
        }
        
        .banner li:hover {
            background-color: #dd4012;
            color: white;
        }
        
        .banner img {
            position: absolute;
            left: 0px;
            top: 0;
            width: 183px;
            z-index: 2;
        }
        
        section {
            width: 100%;
            height: 220px;
            background-image: url(img/3/2.png);
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }
        
        section .banner1 {
            width: 100%;
            height: 28px;
            background-color: #131418;
            position: absolute;
            bottom: 0;
            opacity: .8;
        }
        
        section .banner1 div {
            width: 1100px;
            height: 100%;
            margin: auto;
        }
        
        section ul {
            width: 130px;
            height: 28px;
            line-height: 28px;
            font-size: 14px;
            color: #a6a6a6;
            display: flex;
            justify-content: space-between;
            text-align: center;
        }
        
        main {
            background-color: #f0f1f1;
            width: 100%;
        }
        
        main .banner2 {
            width: 1100px;
            margin: auto;
            /* overflow: hidden; */
            padding-bottom: 40px;
            padding-top: 25px;
        }
        
        main .banner2 .nav {
            width: 410px;
            height: 26px;
            text-align: center;
            display: flex;
            justify-content: space-between;
            /* margin-top: 25px; */
            margin-bottom: 28px;
        }
        
        main .banner2 .nav li {
            width: 78px;
            line-height: 26px;
            font-size: 12px;
            background-color: white;
            color: #acacac;
            cursor: pointer;
        }
        
        main .banner2 .nav li:nth-of-type(1) {
            background-color: #636363;
        }
        
        main .foot {
            width: 240px;
            height: 36px;
            display: flex;
            justify-content: space-between;
            text-align: center;
            /* margin-bottom: 40px; */
            margin: auto;
        }
        
        main .foot li {
            width: 36px;
            height: 36px;
            line-height: 36px;
            background-color: white;
            cursor: pointer;
        }
        
        main .foot li:nth-of-type(2) {
            background-color: #dd4012;
        }
        
        footer {
            height: 48px;
            width: 100%;
            background-color: #1e2020;
            opacity: .8;
            position: fixed;
            bottom: 0;
        }
        
        footer div {
            width: 1100px;
            height: 100%;
            margin: auto;
            background-image: url(img/1/4.1.png);
            background-repeat: no-repeat;
            background-position: 0 10px;
        }
        
        footer ul {
            width: 350px;
            height: 48px;
            line-height: 48px;
            font-size: 12px;
            color: #999999;
            display: flex;
            justify-content: space-between;
            margin-left: 750px;
        }
        
        .text {
            width: 1100px;
            margin: auto;
            position: relative;
        }
        
        .text li {
            width: 1100px;
            height: 161px;
        }
        
        .text .left {
            border-top: 1px solid #e2e2e2;
            border-bottom: 1px solid #e2e2e2;
            width: 110px;
            height: 159px;
            margin-right: 40px;
            float: left;
        }
        
        .text .left p {
            font-size: 9px;
            text-align: center;
            color: #999999;
            margin-top: 19px;
            margin-bottom: 14px;
            width: 110px;
        }
        
        .text .left h1 {
            font-size: 30px;
            text-align: center;
            width: 110px;
            color: #999999;
            font-weight: bold;
        }
        
        .text .right {
            border-top: 1px solid #e2e2e2;
            border-bottom: 1px solid #e2e2e2;
            height: 159px;
            width: 950px;
            float: left;
            box-sizing: border-box;
            padding-left: 11px;
            padding-top: 19px;
            padding-bottom: 40px;
        }
        
        .text .right img {
            width: 220px;
            height: 100px;
            float: left;
            margin-right: 19px;
        }
        
        .text .right h3 {
            font-size: 18px;
            margin-left: 22px;
            color: #dd4012;
            margin-bottom: 19px;
        }
        
        .text .right h5 {
            font-size: 11px;
            float: left;
            margin-left: 22px;
            color: #a0a0a0;
        }
        
        .text .right h5:nth-of-type(1) {
            color: black;
            margin-left: 0;
        }
        
        .text .right p {
            font-size: 12px;
            margin-left: 22px;
            margin-top: 7px;
            color: #666666;
        }
        
        #box {
            display: none;
        }
        
        .text .xin {
            width: 29px;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <header>
        <div class="banner">
            <ul>
                <li><a href="index.html">网站首页</a></li>
                <li><a href="">传说资源</a></li>
                <li><a href="案例-列表.html">传说案例</a></li>
                <li><a href="">传说服务</a></li>
                <li style="background-color: #dd4012;"><a href="解决方案列表.html">解决方案</a></li>
                <li><a href="">需求提交</a></li>
            </ul><img src="img/1/logo.png" alt="">
        </div>
    </header>
    <section>
        <div class="banner1">
            <div>
                <ul>
                    <li>网站首页</li>
                    <li>></li>
                    <li>传说案例</li>
                </ul>
            </div>
        </div>
    </section>
    <main>
        <div class="banner2">
            <ul class="nav">
                <li>全部</li>
                <li>网站建设</li>
                <li>推广运营</li>
                <li>品牌策划</li>
                <li>网络全家</li>
            </ul>
            <ul class="text">
                <img class="xin" src="img/1/新.png" alt="">
                <li id="box">
                    <a href="解决方案详情.html">
                        <div class="left">
                            <p>2013-09</p>
                            <h1>27</h1>
                        </div>
                        <div class="right">
                            <img src="img/3/3.png" alt="">
                            <h3>行业合作专题，针对旅游行业的资源打散再重组 </h3>
                            <h5>标签：</h5>
                            <h5 class="first">资源整合</h5>
                            <h5 class="second">旅游行业</h5>
                            <h5 class="third"> 行业专题</h5><br>
                            <p>根据游客不同阶段的不同需求，已然可相应引导出不同的媒介资源，串联起所有需求，在不同阶段营造出不同的传播策略，达到既全 面，但是又有针对性的深层次投放，这是需要基于对目标用户有一定研究，同时结合第三方客观数据去完成的专业投放。
                            </p>
                        </div>
                    </a>

                </li>
            </ul>
            <ul class="foot">
                <li>
                    <</li>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>></li>
            </ul>
        </div>

    </main>
    <footer>
        <div>
            <ul>
                <li>关于传说</li>
                <li>新闻动态</li>
                <li>传说观点</li>
                <li>联系传说</li>
                <li>加入传说</li>
                <li>付款账户</li>
            </ul>
        </div>

    </footer>
</body>
<script src="jquery.min.js"></script>
<script>
    let http = new XMLHttpRequest()
    http.open('get', 'http://10.35.164.104:81/jjfaliebiao')
    http.send()
    http.onreadystatechange = function() {
        if (http.readyState === 4) {
            let allb = JSON.parse(http.responseText);
            allb.forEach(function(item) {
                let newItem = $("#box").clone(true);
                newItem.attr("id", "")
                $(".text").append(newItem);
                newItem.find("img").attr("src", item.img);
                newItem.find(".left p").html(item.title);
                newItem.find("h1").html(item.title1);
                newItem.find(".right h3").html(item.title2);
                newItem.find(".first").html(item.title3);
                newItem.find(".second").html(item.title4);
                newItem.find(".third").html(item.title5);
                newItem.find(".right p").html(item.title6);
                newItem.attr("date-id", item.id);
                newItem.click(function() {
                    let id = newItem.attr("date-id")
                    $.ajax({
                        url: `http://10.35.164.104:81/newdemo?id=${id}`,
                        method: "get",
                        success: function(data) {

                        }
                    })
                })
            })
        }
    }
    $(".nav li").click(function() {
        $(".nav li").each(function() {
            $(this).css({
                backgroundColor: "white"
            })
        })
        this.style.backgroundColor = "#636363"
    })
</script>

</html>